<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <link rel="stylesheet" href="/css/common2.css">
    <link rel="stylesheet" href="/css/popup.css">
    <link rel="stylesheet" href="/scriptZIP/vue-select.min.css">
    <style>
       		.search_img {
			margin: 5px 10px 0 0;
		}
		.filter-container {
			display: inline-block;
			flex-wrap: wrap;
			/* 允许换行 */
			gap: 10px;
			/* 输入框之间的间距 */
			/* max-width: 800px; */
			/* 设置最大宽度，可以根据需要调整 */
		}

		.import_model {
			margin-top: -35px;
			margin-left: 130px;
		}

		.table {
			width: 100%;
			margin-left: 0;
		}

		.five {
			max-height: 55px !important;
			min-width: 130px !important;
			padding: 0;
		}

		.three {
			min-width: 100px;
			width: 9%;
		}

		.phone {
			color: blue;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}

		.nickname {
			position: absolute;
			left: 40px;
			bottom: calc((100% - 35px) / 2);
			width: 80px;
			text-align: left;
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}

		.untying {
			position: absolute;
			right: 0;
			bottom: 0;
			display: inline-block;
			font-size: 12px;
			cursor: pointer;
			color: #9F9F9F;
		}

		.img-box {
			width: 35px;
			height: 35px;
			display: inline-block;
			padding: 0;
		}

		.phone {
			display: inline-block;
		}

		.header {
			width: 35px;
			height: 35px;
			position: absolute;
			left: 3px;
			bottom: calc((100% - 35px) / 2);
			display: inline-block;
			border-radius: 50%;
		}

		.choose-class {
			width: 94%;
			height: 35px;
			margin-left: 3%;
			margin-top: 35px;
		}

		.popup {
			width: 330px;
			height: 300px;
		}

		.popup-title {
			padding-left: 100px;
		}

		.relatives-info {
			display: inline-block;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			vertical-align: text-top;
			text-align: left;
		}

		.relatives-name {
			text-indent: 1em;
			width: calc(100% - 13em);
		}

		.relatives-relation {
			width: 5em;
		}

		.info2 {
			margin-top: 0.5em;
			vertical-align: text-top;
		}

		.relatives_info {
			width: 3.5em;
			display: inline-block;
			vertical-align: text-top;
		}

		.relatives_info img {
			height: 3.5em;
			width: 100%;
			border-radius: 50%;
			margin: 0 0.25em;
		}

		.uihf {
			display: flex;
			flex-wrap: wrap;

		}
		.other {
			height: 33px;
			border: 1px solid #7a7a7a;
		}
		

		.search {
			/* width: 7vw; */
			position: relative;
			right: 0px;
			margin: 5px 10px 0 0;
		}
		.enroll-button {
		display: inline-block;
		padding: 10px 20px;
		background-color: #69bbf4; /* 绿色背景 */
		color: white; /* 字体颜色为白色 */
		font-weight: bold;
		text-align: center;
		text-decoration: none;
		border-radius: 5px; /* 圆角效果 */
		box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 阴影效果 */
		transition: background-color 0.3s ease; /* 鼠标悬停时的平滑过渡 */
	}

	.enroll-button:hover {
		background-color: #c52626; /* 悬停时更深的绿色 */
	}
	.total-amount {
    font-weight: bold;
    color: #c52626; /* 红色字体 */
    margin-left: 10px;
	font-size: 20px;
}
[v-if]{
	display: none;
}

    </style>
</head>

<body>
    <div id="vue-root" style="margin-top: 30px;">
        <div class="filter-container">
            <div class="refresh" onclick="location.reload()">刷新</div>
            

            <div class="uihf">
                <input placeholder="请输入学生姓名" class="search" v-model="search.name" @keyup.enter="getData0"
                    style=" width: 120px; height: 33px;">

                <select class="search" v-model="search.schoolId">
                    <option :value="undefined">请选择分配校区</option>
                    <option v-for="school in schools" :key="school.id" :value="school.id" v-text="school.name">
                    </option>
                </select>
                <select class="search" v-model="search.fschoolId">
                    <option :value="undefined">请选择关联校区</option>
                    <option v-for="school in fschools" :key="school.id" :value="school.id" v-text="school.name">
                    </option>
                </select>

                <select class="search" v-model="search.courseId">
                    <option :value="undefined">请选择咨询课程</option>
                    <option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
                    </option>
                </select>
                <select class="search" v-model="search.courseIds">
                    <option :value="undefined">请选择报读课程</option>
                    <option v-for="course in courses" :key="course.id" :value="course.id" v-text="course.name">
                    </option>
                </select>
                <v-select
                v-model="search.promoter"
                :options="promoters"
                label="name"
                :reduce="promoter => promoter.id"
                placeholder="请选择推广人"
                :filterable="true"
                :clearable="true"
                style="width: 150px; display: inline-block;"
              ></v-select>
                <!-- <select class="search" v-model="search.promoter">
                    <option :value="undefined">请选择推广人</option>
                    <option v-for="promoter in promoters" :key="promoter.id" :value="promoter.id"
                        v-text="promoter.name">
                    </option>
                </select> -->
                <v-select
				v-model="search.people"
				:options="peoples"
				label="name"
				:reduce="people => people.id"
				placeholder="请选择跟进人"
				:filterable="true"
				:clearable="true"
				style="width: 150px; display: inline-block;"
			  ></v-select>
                <!-- <select class="search" v-model="search.people">
                    <option :value="undefined">请选择跟进人</option>
                    <option v-for="people in peoples" :key="people.id" :value="people.id" v-text="people.name">
                    </option>
                </select> -->
                <select class="search" v-model="selectedDataSourceIndex">
                    <option :value="null">选择数据源</option>
                    <option v-for="(source, index) in dataSource" :key="index" :value="index">
                        {{ source }}
                    </option>
                </select>
                <select class="search" v-model="selectedDataStatusIndex">
                    <option :value="null">选择数据状态</option>
                    <option v-for="(status, index) in dataStatus" :key="index" :value="index">
                        {{ status }}
                    </option>
                </select>
                <select class="search" v-model="selectedDataIntentIndex">
                    <option :value="null">选择数据意向</option>
                    <option v-for="(intent, index) in dataIntent" :key="index" :value="index">
                        {{ intent }}
                    </option>
                </select>
                <select class="search" v-model="selectedFollowReasons">
                    <option :value="null">选择未报读理由</option>
                    <option v-for="(followreason, index) in followReason" :key="index" :value="index">
                        {{ followreason }}
                    </option>
                </select>
				<input placeholder="数据获取开始时间" class="search" id="startTime" v-model="search.startTime" style="font-size: 15px; width: 130px;"/>
				<input placeholder="数据获取结束时间" class="search" id="endTime" v-model="search.endTime" style="font-size: 15px;width: 130px;"/>
                <input placeholder="报读开始时间" class="search" id="orderCreateStartTime" v-model="search.orderCreateStartTime" />
				<input placeholder="报读结束时间" class="search" id="orderCreateEndTime" v-model="search.orderCreateEndTime" />

                <img src="../image/search.png" height="35" width="35" class="search_img" @click="getData0" />
            </div>
        </div>

        <form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
            <input type="file" name="file" id="file" @change="importExcel" ref="file"
                accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
        </form>
        <div class="table " style="margin-left: 2%;width: 96%; overflow: auto;">
            <table class="table_top">
                <thead>
                    <tr>
                        <th class="one">
                            <input type="checkbox" class="check-box" v-model="all">
                        </th>
                        <th class="one">序号</th>
                        <th class="one">学员姓名</th>
                        <th class="one">关联校区</th>
                        <th class="three">分配校区</th>
                        <th class="one">咨询课程</th>
                        <th class="one">报读课程</th>
                        <th class="one">推广人员</th>
                        <th class="one">跟进人</th>

                        <th class="one">数据来源</th>
                        <th class="one">数据状态</th>
                        <th class="one">数据意向</th>

                        <th class="one">未报读理由</th>
                        <th class="one">数据获取时间</th>
                        <th class="one">报读时间</th>
                        <th class="one">成交周期(天)</th>
                    </tr>
                </thead>
                <tbody id="list">
                    <tr v-for="(student,index) in list" :key="student.id">
                        <td>
                            <input type="checkbox" class="check-box" v-model="student.checked">
                        </td>
                        <td class="one"><span v-text="index+1"></span></td>
                        <td class="one" v-text="student.name"></td>
                        <td class="one" v-text="student.fschoolName"></td>
                        <td class="one" v-text="student.schoolNamea"></td>
                        <td class="one" v-text="student.courseNames"></td>
                        <td class="one" v-text="student.courseName1"></td>

                        <td class="one" v-text="student.promoterName"></td>
                        <td class="one" v-text="student.peopleName"></td>
                        <td class="one" v-text="student.dataSource"></td>
                        <td class="one" v-text="student.dataStatus"></td>
                        <td class="one" v-text="student.dataIntent"></td>

                        <td class="one" v-text="student.followReason"></td>
                        <td class="one" v-text="student.time"></td>
                        <td class="one" v-text="student.handlingDate"></td>
                        <td class="one" v-text="student.dealCycleDays"></td>
                    </tr>

                </tbody>
            </table>

        </div>
        <ul class="pagination" v-if="pages>1">
            <li>
                <a v-if="pageNum!=1" @click="pageNum=1">«</a>
                <a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
                <a v-text="pageNum"></a>
                <a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
                <a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
            </li>
            <li>
                <a v-text="pages"></a>
            </li>
        </ul>
        <div style="float: right;">
            总共{{total}}条记录
            <select class="ui-select init" style="height:32px" v-model="pageSize">
                <option :value="10">每页10条</option>
                <option :value="30">每页30条</option>
                <option :value="100">每页100条</option>
            </select>
        </div>
    </div>
    <script src="/scriptZIP/qs.min.js"></script>
    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>

    <script src="/scriptZIP/vue-select.min.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/list.js"></script>
    <script src="/js/auth_util.js"></script>

    <script>

        Vue.component('v-select', VueSelect.VueSelect);
        var app = new Vue(merge({
            data: {
                schools: [],
                fschools:[],
                promoters: [],
                peoples: [],
                courses: [],
                dataSource: null,
                dataStatus: null,
                dataIntent: null,
                followReason: null,
                selectedDataSourceIndex: null, // 添加这里
                selectedDataStatusIndex: null,   // 添加这里
                selectedDataIntentIndex: null,    // 添加这里
                selectedFollowReasons: null,
                urls: {
                    del: '/pc/student/del'
                },
                important: {
                    content: '',
                    date: '',

                },

            },
            created: function () {
                var id = top_params().id;
                if (!id) return;
                this.agentId = id
                this.urls.list = '/pc/student/getDataAnalysis?agentId=' + id;
                this.getData();

                axios.get('/pc/school/all/' + id).then(function (res) {
                    this.schools = res.data;
                    this.fschools=res.data;
                }.bind(this));
                abled('recruitStudent', this);

                axios.get('/pc/category/' + id).then(function (res) {
                    this.dataSource = res.data.dataSource;
                    this.dataStatus = res.data.dataStatus;
                    this.dataIntent = res.data.dataIntent;
                    this.followReason = res.data.followReason;
                }.bind(this));
                axios.get('/pc/staffUser/all/' + id).then(function (res) {
                    this.promoters = res.data;
                    this.peoples = res.data;
                }.bind(this));
                axios.get('/pc/course/all/' + id).then(function (res) {
                    this.courses = res.data
                }.bind(this));
            },

            methods: {

            },
            watch: {
                selectedDataSourceIndex: function (e) {
                    var data = this.dataSource.filter((item, i) => {
                        if (i == e) {
                            return item;
                        }
                    })
                    this.search.dataSource = data[0]

                },
                selectedDataStatusIndex: function (e) {

                    var data = this.dataStatus.filter((item, i) => {
                        if (i == e) {
                            return item;
                        }
                    })
                    this.search.dataStatus = data[0]

                },
                selectedDataIntentIndex: function (e) {

                    var data = this.dataIntent.filter((item, i) => {
                        if (i == e) {
                            return item;
                        }
                    })
                    this.search.dataIntent = data[0]

                },
                selectedFollowReasons: function (e) {

                    var data = this.followReason.filter((item, i) => {
                        if (i == e) {
                            return item;
                        }
                    })
                    this.search.followReason = data[0]

                }
            }
        }));
        ["orderCreateStartTime", "orderCreateEndTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
		["startTime", "endTime"].forEach(function (it) {
			laydate.render({
				elem: "#" + it,
				type: "date",
				done: function (value, date, endDate) {
					app.search[it] = value;
				},
			});
		});
    </script>

</body>

</html>